<html>
    <head>
        <title>
            Moving Circle.
        </title>
        <script type="text/javascript">

        <!--
            var circle = {color:"#FF1C0A"};
            var vector = {};
            var defaultValues = {x : 100, y:100, r:10};
            var compute = function(){
                console.log("start ..............");
                window.setInterval("drawCircle(getRandomVector())", 1000);
            };


            var drawCircle = function(vector){
                //get a reference to the canvas
                var ctx = document.getElementById("canvas").getContext("2d");

                if (circle.x!==vector.x || circle.y!==vector.y || circle.r!==vector.r){
                    //remove the old one
                    ctx.clearRect(0,0,canvas.width,canvas.height); 
                    circle.x = vector.x;
                    circle.y = vector.y;
                    circle.r = vector.r;
                }

                if (circle.r === 0)
                    throw new Error("Error : Radius is zero, use the default value!");

                //draw a circle
                ctx.fillStyle = "#FF1C0A";
                ctx.beginPath();
                ctx.arc(circle.x, circle.y, circle.r, 0, Math.PI*2, true);
                ctx.closePath();
                ctx.fill();
            };

            var getRandomVector = function(circle){
                vector.x = Math.floor(Math.random()*800);
                vector.y = Math.floor(Math.random()*200);
                vector.r = Math.floor(Math.random()*5)*6;
                if (vector.r !== 0 && vector.r < 30);
                    return vector;
                vector.r = defaultValues.r;
                return vector;
            }


        -->
        </script>

    </head>

    <body id="myBody">
    <h3>
        Moving Circle.
    </h3>
    <p>
        This page shows a moving circle.
        Go through these steps:
       <ol>
       <li> Click on the button.</li>
       <li> When you see the error in Firebug console, set a breakpoint on the error (red dot), then re-run to halt on the error message .</li>
       <li> Locate the defect causes the error.</li>
       </ol>
    </p>

    <p>
    <button id="reproducer" onclick="compute()">
      Start !
    </button>
    </P>

    <canvas id="canvas" width="800" height="200"></canvas>
    </body>

</html>